<!--
 * @Author: zjf
 * @Date: 2023-11-28 19:36:50
 * @LastEditors: zjf
 * @LastEditTime: 2023-12-06 10:06:27
 * @Description: 投资及支付
-->
<template>
  <l-layout class="l-tab-page" :top="queryHeight + 12">
    <template #top>
      <l-panel style="padding-bottom:0;">
        <l-query :span="5" :labelWidth="120" :height.sync="queryHeight" :items="queryItems" :formData="queryData"
          :loading="tableLoading" @search="handleSearch">
          <template #projectName>
            <el-input v-model="queryData.projectName" :placeholder="$t('请输入')" @change="handleSearch" />
          </template>
          <template #constructionEntity>
            <el-input v-model="queryData.constructionEntity" :placeholder="$t('请输入')" @change="handleSearch" />
          </template>
          <template #projectYear>
            <el-input v-model="queryData.projectYear" :placeholder="$t('请输入')" @change="handleSearch" />
          </template>
        </l-query>
      </l-panel>
    </template>
    <l-panel style="padding-top:0;">
      <template #toolLeft>
        <div class="l-panel--item">
          <l-excel-btns></l-excel-btns>
        </div>
      </template>
      <template #toolRight>
        <l-tool-btns :hasAdd="false" :hasTableSetting="true" @setting="lr_handleSettingTable"> </l-tool-btns>
      </template>

      <l-table ref="mainTable"   :loading="tableLoading" :columns="columns" :dataSource="tableData" :isPage="true"
        :pageTotal="tableTotal" :tablePage.sync="tableCurrentPage" @loadPageData="turnTablePage">
        <!-- 项目名称 -->
        <template v-slot:projectName="scope">
          <a slot="reference" @click="handleDetails(0, scope.row)">{{ scope.row.projectName || '---' }}</a>
        </template>
        <template v-for="(col, index) in lr_tableColumnsByToLabel(columns)" v-slot:[col.prop]="scope">
          <l-value-to-label :value="scope.row[col.prop]" :type="col.dataType" :code="col.dataCode"
            :valueKey="col.valueKey" :labelKey="col.labelKey" :options="col.options" :format="col.format"
            :setting="col.setting" :key="index"></l-value-to-label>
        </template>
        <l-table-btns :btns="tableBtns" :filterBtns="filterBtns" @click="lr_handleTableBtnClick"></l-table-btns>
      </l-table>
    </l-panel>

    <!-- 编辑表单 -->
    <DialogForm ref="DialogForm" @refresh="loadTableData" :formEdit="formEdit"></DialogForm>

    <l-project-details ref="ProjectDetails"></l-project-details>

  </l-layout>
</template>

<script>
import { tableColmuns } from "./columns";
import DialogForm from './DialogForm.vue'

export default {
  components: {
    DialogForm
  },
  data() {
    return {
      // 投资及支付
      lr_isPage: true,

      // 查询参数
      queryHeight: 44,
      queryData: {
        projectName: "",
        construction: "",
        projectYear: "",
        constructionEntity: ""
      },

      queryItems: [
        { label: '项目名称', prop: 'projectName' },
        { label: '建设单位', prop: 'constructionEntity' },
        { label: '项目所在年度', prop: 'projectYear' },
      ],

      // 表格参数
      tableLoading: false,
      tableData: [],
      tableTotal: 0,
      tableCurrentPage: 1,
      tablePageSize: 50,
      columns: tableColmuns,
      tableBtns: [
        // { prop: 'Details', label: '详情' },
        { prop: 'Edit', label: '编辑' },
      ],

      // 表单参数
      formVisible: false,
      formTitle: '',
      formEditRow: null,
      formEdit: false,
      formDetail: false,
    }
  },
  computed: {
  },
  mounted() {
    this.init()

    this.lr_loadDataItem('contractType') // 合同类别
    this.lr_loadDataItem('applicateType') // 申请类型
    this.lr_loadDataItem('paymentType') // 支付类型
  },
  methods: {
    init() {
      this.loadTableData()
    },

    filterBtns(row, btns) {
      return btns
    },
    handleSearch() {
      this.loadTableData()
    },
    turnTablePage({ rows }) {
      this.tablePageSize = rows
      this.loadTableData(true)
    },
    async loadTableData(isNotFirst) {
      if (!isNotFirst) {
        this.tableCurrentPage = 1
      }
      this.tableLoading = true
      let queryData = this.$deepClone(this.queryData)
      queryData.rows = this.tablePageSize
      queryData.page = this.tableCurrentPage
      queryData.sidx = 'modifyTime'
      queryData.sord = 'DESC'
      const api = window.$crud("project");
      let data = await this.$awaitWraper(api.getPage(queryData))

      if (data != null) {
        this.tableData = data.rows.map(t => {
          t.plannedInvestmentTotal = t.projectInvestmentPayment[0]?.plannedInvestmentTotal || 0
          t.inveAmt = t.projectInvestmentPayment[0]?.inveAmt || 0
          t.inveAmtLy = t.projectInvestmentPayment[0]?.inveAmtLy || 0
          t.inveAmtCy = t.projectInvestmentPayment[0]?.inveAmtCy || 0
          t.contractAmount = t.projectInvestmentPayment[0]?.contractAmount || 0
          t.settlementAmount = t.projectInvestmentPayment[0]?.settlementAmount || 0
          t.applyAmt = t.projectInvestmentPayment[0]?.applyAmt || 0
          t.payAmt = t.projectInvestmentPayment[0]?.payAmt || 0
          t.inveAmtLys = t.projectInvestmentPayment[0]?.inveAmtLys || 0
          t.inveAmtCys = t.projectInvestmentPayment[0]?.inveAmtCys || 0
          return t
        })
        this.tableTotal = data.records
      }
      else {
        this.tableTotal = 0
        this.tableData = []
      }
      this.tableLoading = false
    },

    //#region 新增 编辑 详情 表单
    handleAdd() {
      this.formEdit = false
      this.formDetail = false
      this.formEditRow = {}
      this.$refs.DialogForm.open()
    },
    handleEdit($index, row) {
      this.formEdit = true
      this.formDetail = false
      this.formEditRow = row
      this.$refs.DialogForm.open(row)
    },
    handleDetails($index, row) {
      this.formDetail = true
      this.formEdit = true
      this.formEditRow = row
      this.$refs.ProjectDetails.open({ projectId: row.id })
    },
    //#endregion



  }
}
</script>
<style lang="scss" ></style>